<template>
  <div v-if="onlyShow" class="wk-dep-checkbox">
    <div v-for="(item, index) in dataList" :key="index" :label="item.deptId" class="xh-user__item">
      <div class="dep-name text-one-line">
        {{ `${item.name}${item.currentNum > 0 ? `(${item.currentNum})` : ''}` }}
      </div>
      <el-button v-if="hasChildren(item)" link class="wk wk-icon-structure" @click="onChildrenClick(item)">
        下级
      </el-button>
    </div>
  </div>
  <el-checkbox-group v-else ref="checkboxGroup" v-model="selectedList" :disabled="disabled" class="wk-dep-checkbox">
    <el-checkbox v-for="(item, index) in dataList" :key="index" :label="item.deptId" class="xh-user__item">
      <div class="dep-name text-one-line">{{ `${item.name}${item.currentNum > 0 ? `(${item.currentNum})` : ''}` }}</div>
      <el-button v-if="hasChildren(item)" link class="wk wk-icon-structure" @click="onChildrenClick(item)">
        下级
      </el-button>
    </el-checkbox>
  </el-checkbox-group>
</template>


<script setup>

import {useUserDepHook} from "@/szcomponent/NewCom/SzDeptUserComp/hooks/useUserDepHook.js";


defineOptions({
  // 部门布局
  name: 'WkDepCheckbox',
})

const props = defineProps({
  // 是否单选
  radio: {
    type: Boolean,
    default: true
  },
  onlyShow: {
    type: Boolean,
    default: false
  },
  // 当前选择部门的所有子部门
  dataList: Array,
  selectedDataList: Array,
  // 取值字段
  props: {
    type: Object,
    default: () => {
      return {}
    }
  },
  disabled: {
    type: Boolean,
    default: false
  }
})


const emits = defineEmits(['allSelectFlagChange', 'childrenClick', 'selectedChange'])

const {
  userDeptOptionData,
  config,
  handleCheckAllChange,
  searchSelect,
} = useUserDepHook(props, emits);

const {selectedList} = toRefs(userDeptOptionData)

/**
 * 点击下一级
 */
function onChildrenClick(item) {
  emits('childrenClick', item)
}

/**
 * 判断是否有子节点
 */
function hasChildren(item) {
  if (item.hasOwnProperty('children')) {
    return item.children.length > 0
  } else if (item.hasOwnProperty('currentNum')) {
    if (item.currentNum > 0) {
      return true
    } else {
      if (item.hasOwnProperty('hasChildren')) {
        return item.hasChildren === 1
      }
      return false
    }
  }
  return false
}


defineExpose({
  searchSelect,
  handleCheckAllChange
})
</script>


<style lang="scss" scoped>
.wk-dep-checkbox {
  .el-checkbox {
    margin-right: 0;
  }

  .xh-user {
    &__item {
      height: 40px;
      display: flex;
      align-items: center;

      :deep(.el-checkbox__input) {
        flex-shrink: 0;
      }

      :deep(.el-checkbox__label ) {
        flex: 1;
        display: flex;
      }

      .dep-name {
        flex: 1;
        padding-right: 8px;
      }

      .el-checkbox {
        margin-right: 8px;
      }

      .el-button--text {
        position: relative;
        color: #ccc;
        padding: 0 12px;
        flex-shrink: 0;

        :deep( i ) {
          font-size: 13px;
          margin-right: 3px;
        }

        &:before {
          content: ' ';
          position: absolute;
          top: 2px;
          left: 0;
          bottom: 2px;
          width: 1px;
          background-color: #e6e6e6;
        }

        &:hover {
          color: #2362FB;
        }

        &.is-disabled {
          color: #C0C4CC;
        }
      }

      .user {
        &-img {
          flex-shrink: 0;
        }

        &-info {
          flex: 1;
          padding: 0 8px;
        }

        &-name {
          max-width: 200px;
        }

        &-post {
          color: #999;
          margin-top: 2px;
          font-size: 12px;
        }
      }

    }
  }
}
</style>
